<template>



  <div>
    <!--    <div>
      user列表
    </div> -->
    <!--搜索-->
    <el-row>
      <el-col :span="8">
        <el-input placeholder="请输入用户名或昵称" v-model="queryInfo.content" :clearable="true" @clear="search"
          @keyup.native.enter="search" size="small" style="min-width: 500px">
          <!--          <el-select v-model="queryInfo.categoryId" slot="prepend" placeholder="请选择分类" :clearable="true"
            @change="search" style="width: 160px">
            <el-option :label="item.name" :value="item.id" v-for="item in categoryList" :key="item.id"></el-option>
          </el-select> -->
          <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
        </el-input>
      </el-col>
    </el-row>

    <el-table :data="userList">
      <el-table-column label="序号" type="index" width="50"></el-table-column>
      <el-table-column label="用户名" prop="userName" show-overflow-tooltip></el-table-column>
      <el-table-column label="昵称" prop="nickName" width="150"></el-table-column>
      <!-- <el-table-column label="密码" prop="password" width="150"></el-table-column> -->
      <el-table-column label="手机号" prop="phonenumber" width="150"></el-table-column>
      <el-table-column label="性别" prop="sex" width="150"></el-table-column>
      <!--<el-table-column label="头像" prop="avatar" width="150"></el-table-column>-->
      <el-table-column label="用户类型" prop="role" width="150"></el-table-column>

      <el-table-column label="状态" width="80">
        <template v-slot="scope">
          <el-switch v-model="scope.row.status" @change="userStatusChanged(scope.row)"></el-switch>
        </template>
      </el-table-column>
      <!--      <el-table-column label="推荐" width="80">
        <template v-slot="scope">
          <el-switch v-model="scope.row.recommend" @change="blogRecommendChanged(scope.row)"></el-switch>
        </template>
      </el-table-column> -->
      <!--      <el-table-column label="可见性" width="100">
        <template v-slot="scope">
          <el-link icon="el-icon-edit" :underline="false" @click="editBlogVisibility(scope.row)">
            {{ scope.row.published ? (scope.row.password !== '' ? '密码保护' : '公开') : '私密' }}
          </el-link>
        </template>
      </el-table-column> -->
      <el-table-column label="创建时间" width="170">
        <template v-slot="scope">{{ scope.row.createTime | dateFormat }}</template>
      </el-table-column>
      <el-table-column label="最近更新" width="170">
        <template v-slot="scope">{{ scope.row.updateTime | dateFormat }}</template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template v-slot="scope">
          <!-- <el-button type="primary" icon="el-icon-edit" size="mini" @click="goBlogEditPage(scope.row.id)">编辑</el-button> -->
          <el-button type="primary" icon="el-icon-edit" size="mini"
            @click="editUserVisibility(scope.row)">编辑</el-button>
          <el-popconfirm title="确定删除吗？" icon="el-icon-delete" iconColor="red" @onConfirm="deleteUserById(scope.row.id)">
            <el-button size="mini" type="danger" icon="el-icon-delete" slot="reference">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="queryInfo.pageNum" :page-sizes="[10, 20, 30, 50]" :page-size="queryInfo.pageSize" :total="total"
      layout="total, sizes, prev, pager, next, jumper" background>
    </el-pagination>

    <!--编辑可见性状态对话框-->
    <el-dialog title="编辑用户信息" width="30%" :visible.sync="dialogVisible">
      <!--内容主体-->
      <!--      <el-form :model="editForm" :rules="formRules" ref="editFormRef" label-width="80px"> -->
      <el-form :model="editForm" ref="editFormRef" label-width="80px">
        <el-form-item label="用户名(慎改)" prop="userName">
          <el-input v-model="editForm.userName"></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="nickName">
          <el-input v-model="editForm.nickName"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phonenumber">
          <el-input v-model="editForm.phonenumber"></el-input>
        </el-form-item>
        <!--        <el-form-item label="性别" prop="sex">
          <el-input v-model="editForm.sex"></el-input>
        </el-form-item> -->
        <el-form-item label="用户类型" prop="role">
          <el-select v-model="editForm.role" placeholder="请选择类型" :clearable="true" style="width: 100%">
            <el-option v-for="item in roleForm" :key="item.value" :label="item.label" :value="item.value">
              <span style="float: left; width: 100px;">{{ item.label }}</span>
              <span style="float: left; width: 100px; height: inherit" :class="`me-${item.value}`"></span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="editForm.status" placeholder="请选择状态" :clearable="true" style="width: 100%">
            <el-option v-for="item in statusForm" :key="item.value" :label="item.label" :value="item.value">
              <span style="float: left; width: 100px;">{{ item.label }}</span>
              <span style="float: left; width: 100px; height: inherit" :class="`me-${item.value}`"></span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <!--底部-->
      <span slot="footer">
        <el-button @click="dialogVisible=false">取 消</el-button>
        <el-button type="primary" @click="saveUserEdit">保存</el-button>
      </span>
    </el-dialog>
  </div>


</template>

<script>
  import Breadcrumb from "@/components/Breadcrumb";
  import {
    getUserList,
    updateUser
  } from '@/api/user'

  export default {
    name: 'userList',
    components: {
      Breadcrumb
    },
    data() {
      return {
        queryInfo: {
          content: '', // categoryId: null,
          pageNum: 1,
          pageSize: 10
        },
        userList: [],
        total: 0,
        dialogVisible: false,
        editForm: {}, //修改表单
        userId: 0, //被修改的用户id
        statusForm: [{
            label: '正常',
            value: '0'
          },
          {
            label: '停用',
            value: '1'
          }
        ],
        roleForm: [{
            label: '用户',
            value: 'user'
          },
          {
            label: '医生',
            value: 'doctor'
          }
        ]
      }
    },
    created() {
      this.getUserList();
    },
    methods: {
      getUserList() {
        // alert("获取用户信息");
        getUserList(this.queryInfo).then(res => {
          res = res.data;
          if (res.code == 1) {
            this.userList = res.data.records;
            this.total = res.data.total;
          }
        })
      },
      //监听 pageSize 改变事件
      handleSizeChange(newSize) {
        this.queryInfo.pageSize = newSize
        this.getData()
      },
      //监听页码改变的事件
      handleCurrentChange(newPage) {
        this.queryInfo.pageNum = newPage
        this.getData()
      },
      search() {
        alert("搜索");
      },
      deleteUserById(id) {
        alert("删除用户" + id);
      },
      userStatusChanged(id) {
        alert("修改用户状态" + id);
      },
      //编辑用户可见性
      editUserVisibility(row) {
        if (row.role == 'admin') {
          this.msgError('不能修改管理员的信息');
          return;
        }
        if (row.status == false) {
          row.status = 0;
        }
        if (row.status == true) {
          row.status = 1;
        }
        this.editForm = {
          ...row
        }
        this.userId = row.id
        this.dialogVisible = true
      },
      saveUserEdit() { // 保存提交 修改用户信息
        // console.log(this.editForm);
        updateUser(this.editForm).then(res => {
          res = res.data;
          if (res.code == 1) {
            this.msgSuccess(res.msg);
            this.dialogVisible = false;
            this.getUserList();
          } else {
            this.msgError(res.msg);
          }

        })
      }
    }
  }
</script>

<style>
</style>